<template>
    <button id="btn">sort</button>
    <div class="box">
        <nav>1</nav>
        <nav>2</nav>
        <nav>3</nav>
        <nav>4</nav>
        <nav>5</nav>
        <nav>6</nav>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';

// 获取开始位置
const getLocation = (dom) => {
    const rect = dom.getBoundingClientRect();
    return rect.top;
}

const raf = (fn) => {
    // 页面浏览器的渲染结束 css啊dom啊 继续下一步的操作
    requestAnimationFrame(() => {
        requestAnimationFrame(fn)
    })
}

onMounted(() => {

    btn.onclick = () => {

        let fatherDom = document.querySelector('.box')
        let firstDom = document.querySelectorAll('.box nav')[0];
        let btn = document.querySelector("#btn");
        let start = getLocation(firstDom);

        fatherDom.insertBefore(firstDom, null);
        let end = getLocation(firstDom);

        let dif = start - end;
        firstDom.style = '';
        firstDom.style.transform = `translateY(${dif}px)`;
        raf(() => {
            firstDom.style.transform = `translateY(0px)`;
            firstDom.style.transition = `all .3s linear`;
        })
    }
})
</script>
<style lang="less" scoped>
.box {
    width: 100%;
    height: auto;

    nav {
        width: 200px;
        height: 40px;
        border-radius: 30px;
        background: rgba(24, 144, 255);
        margin-top: 10px;
        box-shadow: 0px 0px 4px #ccc;
        text-align: center;
        line-height: 40px;
    }
}
</style>